<!DOCTYPE html>
<html lang="en">
<head>
  <title>Live Cropping Demo</title>
  <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
  <script src="<?php echo base_url();?>crop_upload/js/jquery.min.js"></script>
  <script src="<?php echo base_url();?>/crop_upload/js/jquery.Jcrop.js"></script>
  <link rel="stylesheet" href="<?php echo base_url();?>crop_upload/demo_files/main.css" type="text/css" />
  <link rel="stylesheet" href="<?php echo base_url();?>crop_upload/demo_files/demos.css" type="text/css" />
  <link rel="stylesheet" href="<?php echo base_url();?>crop_upload/css/jquery.Jcrop.css" type="text/css" />

<script type="text/javascript">
  $(function(){
    $('#cropbox').Jcrop({
      aspectRatio: 1,
      onSelect: updateCoords
    });
  });
  function updateCoords(c)
  {
    $('#x').val(c.x);
    $('#y').val(c.y);
    $('#w').val(c.w);
    $('#h').val(c.h);
  };

  function checkCoords()
  {
    if (parseInt($('#w').val())) return true;
    alert('Please select a crop region then press submit.');
    return false;
  };

</script>
</head>
<body>
		<!-- This is the image we're attaching Jcrop to -->
		<img src="<?php echo base_url().'uploads/'.$orig_name;?>" id="cropbox" />
      

		<!-- This is the form that our event handler fills -->
		<form action="" method="post" onSubmit="return checkCoords();">
			<input type="hidden" id="x" name="x" />
			<input type="hidden" id="y" name="y" />
			<input type="hidden" id="w" name="w" />
			<input type="hidden" id="h" name="h" />
            <input type="text" name="full_url" value="<?php echo $full_path;?>">
            <input type="text" name="image_name" value="<?php echo $orig_name;?>">
            
			<input type="submit" name ="crop" value="Crop Image" class="btn btn-large btn-inverse" />
		</form>




	</body>

</html>
